header {
    background-color: transparent !important;
    position: sticky;
    top: 0px;
    z-index: 9999;

    .navbar {
        padding: 2rem 1rem;

    }

    .navbar-collapse {

        flex-grow: 0;
        // margin-right: 4rem;
        // padding-right: 4rem;
        float: left;

    }

    .bg-light {
        background-color: transparent !important;
        width: 70%;
        margin: auto;

    }

    .navbar-light .navbar-nav .nav-link {
        color: #f8f9fa !important;
        font-family: 'Comfortaa', Cursive;
        font-size: 20px;
        font-weight: 700;
        margin-right: .5rem;
    }

    .dropdown-menu {
        left: 0rem;
        top: 4.7rem;
        background-color: black;

    }

    .menu-1 {
        op: 11rem;
        left: 9.9rem;
    }

    .dropdown-item {
        color: #f8f9fa !important;

        &:focus {
            background-color: black;
        }

        &:hover {
            background-color: rgb(61, 71, 79);
        }
    }
    .nav-link{
        &:hover{
            color: #059f81;
        }
    }

    .logo {
        width: 43px;
        padding-top: 8px;
        padding-right: 5px;

        a {
            width: 20%;

            img {
                width: 100%;
                padding-left: .6rem;
            }
        }

    }

    .main {
        width: 100%;
        // position: relative;
        text-align: center;
        font-family: 'Comfortaa', Cursive;
        color: white;

        .item {
            h1 {
                text-transform: uppercase;
                font-size: 60px;
                color: white;
                font-weight: bold;
                padding-top: 10rem;
            }
        }

        .item-1 {
            font-size: 25px;
            padding-top: 1rem;
            padding-bottom: 50px;
        }

        .item-2 {
            margin: 0 auto;
            border: 2px solid white;
            color: white;
            border-radius: 30px;
            width: 10%;
            padding: 10px 15px;
            font-size: 18px;
            text-decoration: none;
            font-family: 'Times New Roman', Times, serif;

            &:hover {
                transition: .5s;
                background-color: rgb(72, 214, 145);
            }
        }
    }
}


.bottom {
    position: relative;
    display: block;
    background: #232a34;
    margin-top: -16px;

    .follow {
        width: 55%;
        margin: 0 auto;
        padding: 115px 0px 120px 0px;
        border-bottom: 2px solid #2c343f;

        h1 {
            font-size: 28px;
            font-family: 'Comfortaa', Cursive;
            color: white;
            line-height: 38px;
            margin-bottom: 11px;
            text-align: center;
        }

        .email {
            max-width: 360px;
            width: 100%;
            margin: 0 auto;

            input {
                display: block;
                border: 2px solid white;
                width: 100%;
                font-size: 14px;
                background-color: #232a34;
                color: white;
                border-radius: 30px;
                padding: 6px 3px;
                text-align: center;

                &::placeholder {
                    color: white;
                }

                &:focus {
                    border: 2px solid #059f81;
                }
            }

            button {
                display: block;
                font-family: 'Comfortaa', Cursive;
                font-size: 23px;
                color: white;
                background-color: #059f81;
                margin-left: 73px;
                border-bottom-left-radius: 40px;
                border-bottom-right-radius: 40px;
                padding: 7.4px 4px;
                width: 60%;
                transition: .5s ease-in-out;

                &:hover {
                    background-color: #fff;
                    color: #059f81;
                }
            }
        }

    }

    .last {
        width: 55%;
        margin: 0 auto;
        padding: 50px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            float: left;

            figure {
                a {
                    img {}
                }

            }
        }

        .right {
            float: left;
            width: 60%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            ul {


                li {
                    list-style: none;
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                    background-color: #171d24;
                    ;
                    float: left;


                    a {
                        img {
                            display: block;
                            width: 100%;
                            margin: 15% auto;
                        }
                    }
                }
            }

            .right-right {
                float: left;

                span {
                    color: #666b74;
                }

                a {
                    color: white;
                    list-style: none;
                }
            }
        }
    }
}


// 两套PC端响应式 （1920、1600、1440、1200、992、768）
@media screen and (max-width: 1600px) {}

@media screen and (max-width: 1440px) {
    .bottom {
        .last {
            width: 60%;
        }
    }
}

@media screen and (max-width: 1200px) {
    #bcground {
        background-size: cover !important;
    }

    .bottom {
        .last {
            width: 70%;
        }
    }
}

@media screen and (max-width: 992px) {
    .bottom {
        .last {
            width: 80%;

            .right {
                width: 65%;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    #bcground {
        .bg-light {
            
            display: block;
            
        }

        

        ul {
            li {
                padding-right: 20px;
            }
        }

        .logo {
            display: none;
        }

        .navbar-toggler {
            position: absolute;
            top: 39px;
            right: 40px;
            background-color: #fff;
            
        }

        .mr-auto {
            flex-wrap: nowrap
        }

        .navbar-nav {
            flex-direction: row;
            position: absolute;
            left: 17px;
            top: 75px;
        }

        .collapse {
            height: 0px;
            transition: all .5s ease-in-out;
        }

        .dropdown-menu {
            position: absolute;
            left: 0px;
            top: 45px;
        }

        .menu-1 {
            top: 182px;
            left: 157px;
        }
    }

    .bottom {
        .last {
            width: 80%;
            flex-direction: column;
            align-items: normal;

            .right {
                width: 100%;
                margin-left: -50px;
            }
        }
    }
}